<template>
  <v-container>
    <v-row class="text-right" justify="end">
      <v-col class="text-right">
        <v-text-field
            v-model="pageRoleRequest.code"
            density="compact"
            variant="outlined"
            :label="$t('table.header.role.code')"
            :placeholder="$t('placeholder.role.code')"
            clearable  :counter="addRoleValidation.code" :max-length=addRoleValidation.code
        />
      </v-col>
      <v-col>
        <v-text-field
            v-model="pageRoleRequest.name"
            density="compact"
            variant="outlined"
            :label="$t('table.header.role.name')"
            :placeholder="$t('placeholder.role.name')"
            clearable  :counter="addRoleValidation.name" :max-length=addRoleValidation.name
        />
      </v-col>
      <v-col class="text-right">
        <v-autocomplete
v-model="pageRoleRequest.status" density="compact"
                  variant="outlined" :label="$t('table.header.role.status')"
                  :placeholder="$t('placeholder.role.status')" :items="statusList" item-title="name"
                  item-value="code" clearable />
      </v-col>
    </v-row>
    <v-row class="text-right" justify="end">
      <v-btn variant="text" append-icon="mdi-clipboard-plus" @click="goAddRoleEvent()">
        {{ $t('button.common.add') }}
      </v-btn>
      <v-btn variant="text" append-icon="mdi-database-search" @click="goSearchEvent()">
        {{ $t('button.common.search') }}
      </v-btn>
    </v-row>
    <v-table>
      <thead>
      <tr>
        <th v-for="header in headers" :key="header.key" class="text-center">
          {{ $t(useLanguageProperty(header)) }}
        </th>
        <th class="text-center">
          {{ $t('title.common.operation') }}
        </th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="role in roleList" :key="role.id">
        <td v-for="header in headers" class="text-center">
          {{ useProperty(role, header) }}
        </td>
        <td class="text-center">
          <v-btn variant="text" append-icon="mdi-lead-pencil" @click="editRole(role.id)">
            {{ $t('button.common.edit') }}
          </v-btn>
          <v-btn variant="text" append-icon="mdi-lock" @click="editRole(role.id)">
            {{ $t('button.common.disabled') }}
          </v-btn>
          <v-btn variant="text" append-icon="mdi-lock-open" @click="editRole(role.id)">
            {{ $t('button.common.enabled') }}
          </v-btn>
        </td>
      </tr>
      </tbody>
    </v-table>
    <v-pagination
        v-model="currentPage"
        :length="totalPage"
        :total-visible="totalVisible"
    />
  </v-container>

</template>
<script setup lang="ts">
import {LAYOUT_MAIN, TITLE_ROLE} from "~/resource/constants/common/constant";
import {roleHeaders} from "~/resource/constants/tables/role";
import {Role} from "~/resource/types/role/role";
import {Dictionary} from "~/resource/types/common/dictionary";
import {Category} from "~/resource/types/common/category";
import {PageRoleRequest} from "~/resource/types/role/page-role-request";
import {AddRoleRequest} from "~/resource/types/role/add-role-request";
import {consola} from "consola";
import {AddRoleValidationNotificationMessage} from "~/resource/types/role/add-role-validation-notification-message";
import {AddRoleValidationConfig} from "~/resource/types/role/add-role-validation-config";

definePageMeta({
  layout: LAYOUT_MAIN,
  title: TITLE_ROLE
});
const appConfig = useAppConfig();
const currentPage = ref<number>(appConfig.page?.defaultCurrentPage || 0);
const totalVisible = ref<number>(appConfig.page?.defaultTotalVisible || 0);
const totalPage = ref<number>(0);
const headers = ref(showTableHeader(roleHeaders));
const roleList = ref<Array<Role>>([]);
const statusList = ref<Array<Dictionary>>([]);
const localization = useI18n();
const pageRoleRequest = ref<PageRoleRequest>(new PageRoleRequest(null, null, null));
const addRoleRequest = ref<AddRoleRequest>(new AddRoleRequest(null, null, null));
const roleCategoryList = ref<Array<Category>>([]);
const roleCategoryList2 = ref<Array<string>>([]);
const goAddRole = ref<boolean>(false);
const addRoleValidationMessage = ref<AddRoleValidationNotificationMessage>(new AddRoleValidationNotificationMessage(null, null, null))
const addRoleValidation = ref<AddRoleValidationConfig>(new AddRoleValidationConfig(appConfig.validation.common.codeMaxLength, appConfig.validation.common.nameMaxLength));
const selectRolePage = () => {
  roleList.value = [];
  roleList.value.push(new Role(1, "0002" + currentPage.value, "备注", [], "角色"));
  totalPage.value = 2;
}

const editRole = (id: number) => {
  useConfirmDialog(localization.t('title.common.confirm'), id + "", () => {
  }, () => {
  });
}

const getStatusList = () => {
  statusList.value.push(new Dictionary("启用", "0001"));
  statusList.value.push(new Dictionary("禁用", "0002"));
  pageRoleRequest.value.status = statusList.value[0]?.code || null;
  selectRolePage();
}
getStatusList();

const getRoleCategoryList = () => {
  roleCategoryList.value = [];
  roleCategoryList.value.push(new Category("角色分类1", "0001", 1));
  roleCategoryList.value.push(new Category("角色分类2", "0002", 2));
  roleCategoryList2.value = ['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']
}

const goAddRoleEvent = () => {
  addRoleRequest.value = new AddRoleRequest(null, null, null);
  getRoleCategoryList();
  goAddRole.value = true;
}


const addRoleEvent = () => {
  consola.info("请求参数", addRoleRequest)
  goAddRole.value = false;
}
const endAddRoleEvent = () => {
  goAddRole.value = false;
}
const goSearchEvent = () => {
  selectRolePage();
}

const requiredCategory = () => {
  if (!addRoleRequest.value.categoryId) {
    addRoleValidationMessage.value.categoryId = '必填';
  } else {
    addRoleValidationMessage.value.categoryId = null;
  }
  return !!addRoleRequest.value.categoryId;
}

const requiredCode = () => {
  if (!addRoleRequest.value.code) {
    addRoleValidationMessage.value.code = '必填';
  } else {
    addRoleValidationMessage.value.code = null;
  }
  return !!addRoleRequest.value.code;
}
const requiredName = () => {
  if (!addRoleRequest.value.name) {
    addRoleValidationMessage.value.name = '必填';
  } else {
    addRoleValidationMessage.value.name = null;
  }
  return !!addRoleRequest.value.name;
}
watch(currentPage,
    () => {
      selectRolePage();
    }
)
</script>